:root {
    --blue-color: #8BCBC8;
    --icing-color: #DAE9E4;
    --orange-color: #FDAE84;
    --sakura-color: #ECC7C0;
    --cranberry-color: #3C2E3D;
    --main-color: var(--cranberry-color);
    --dark-main-color: #2C1E2D;
    --accent-color: var(--orange-color);
}
.html {
    margin: 0px !important;
    padding: 0px !important;
    height: 100vh;
    display: inline-block;
}
body {
    margin: 0px !important;
    padding: 0px !important;
    height: 80vh;
    background-color: var(--cranberry-color);
}
#main {
    background-color: var(--icing-color);
    height: 80vh;
}
#hovermenu {
    top: 0;
    left: 0;
    background-color: #00000088;
    position: absolute;
    width: 100vw;
    height: 100vh;
}
#dialog {
    top: 10vh;
    left: 30vw;
    background-color: whitesmoke;
    position: absolute;
    border: .6vh solid var(--cranberry-color);
    border-radius: 2vh;
    padding: .6vh;
    padding-top: 1vh;
    width: 40vw;
    height: 60vh;
}
#top-border {
    margin: 0;
    margin-left: 0.5vw;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    justify-content: center;
    
    background-color: var(--main-color);
    /* border: 20px solid var(--blue-color); */
    align-items: center;
    color: white;
    padding: .5vh;
    text-align: center;
    font-family: 'Lemon', cursive; 
    font-size: 60vh;
    height: 100vh;
}
.title {    
    color: white;
    padding: .5vh;
    text-align: center;
    font-family: 'Lemon', cursive; 
    font-size: 6vh;
}
.title:link, .title:visited {
    color: white;
    text-decoration: none;
    display: inline-block;
}

.title:hover, .title:active {
    color: var(--orange-color);

    transition: all 400ms ease-in;
}


.finger {
    fill: var(--main-color);
    /* stroke: tomato; */
}
.pad {
    fill: var(--main-color)
    /* stroke: tomato; */
}
.mainbutton {
    stroke: cornflowerblue;
    stroke-width: 5px;
    fill: #FFFFFF00;
}

.mainbuttoncontainer:hover .mainbutton{
    stroke: var(--sakura-color);
    stroke-width: 10px;
    transition: all 200ms ease-out;
}

.navbutton {
    stroke: cornflowerblue;
    stroke-width: 4vh;
    fill: #FFFFFF00;
}

.navbutton:hover {
    stroke: var(--sakura-color);
    stroke-width: 7vh;
    transition: all 200ms ease-out;
}

.mainbuttontext {
    font-family: 'Lemon';
    fill: white;
    font-size: 2vh;
}

.navbartext {
    font-size: 16vh;
    font-family: 'Lemon';
    fill: white;
}

.profiletext {
    font-family: 'Lemon';
    fill: var(--main-color);
    font-size: 4vh;
}

#search {
    background-color: var(--dark-main-color);
    color: whitesmoke;
    padding: 5vh;
    text-align: left;
    margin: 0;
    margin-top: 10vh;
    font-family: Helvetica; 
    vertical-align: top;
    font-size: 30vh;
    border: none;
    line-height: 50vh;
    border-radius: 7vh;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border: 4vh solid var(--dark-main-color);
    
}
::placeholder {
    color: white;
}

#search:hover, #search:focus {
    background-color: var(--sakura-color);
    color:white;
    transition: all 200ms ease-out;
}

#searchbutton {
    font-size: 40vh;
    margin: 0;
    margin-top: 10vh;
    padding: 0 10vh;
    width: 4vw;
    color: var(--blue-color);
    background-color: white;
    vertical-align: top;
    border: 4vh solid var(--blue-color);
    border-radius: 7vh;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    line-height: 60vh;
}
#searchbutton:hover {
    border: 4vh solid var(--sakura-color);
    font-size: 50vh;
    transition: all 200ms ease-out;
}
#searchbutton:active {
    border: 4vh solid var(--sakura-color);
    color: var(--sakura-color);
}
::-webkit-scrollbar {
    background-color: var(--icing-color);
    border: 1px solid black;
  }
  ::-webkit-scrollbar-thumb {
    background-color: var(--cranberry-color);
    border: 1px solid black;
    border-radius: 10px;
  }
  ::-webkit-scrollbar-button {
    background-color: var(--cranberry-color);
    border: 1px solid black;
  }

#searchResults {
    margin: 1vh auto;
    background-color: whitesmoke;
    border: .6vh solid var(--cranberry-color);
    border-radius: 2vh;
    padding: .6vh;
    padding-top: 2vh;
    width: 40vw;
    height: 60vh;

    color: var(--cranberry-color);
    
    font-family: 'Lemon', cursive; 
    font-size: 3vh;
}
#results {
    margin: 1vh auto;
    background-color: white;
    border: .6vh solid var(--icing-color);
    border-radius: 2vh;
    padding: .6vh;
    padding-top: 2vh;
    width: 35vw;
    height: 50vh;
    overflow-y: auto;
}
.resultLink {
    color: black;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2vh;    
}
.resultTop {
    color: black;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2vh;    
    font-weight: bold;
}
.resultLink:link, .resultLink:visited {
    color: black;
    text-decoration: none;
    display: inline-block;
}

.resultLink:hover, .resultLink:active {
    color: cornflowerblue;
}

#resultbox {
    margin: 0 auto;
    border-bottom: .3vh solid whitesmoke;
    padding: .6vh;
    text-align: left;
    width: 30vw;
    border-collapse: collapse;
}