@font-face {
    font-family: Nunito;
    src: url('../font/Nunito/Nunito-VariableFont_wght.ttf');
}

/* Desktop */
body {
    font-family: Nunito;
    background-color: #443742;
    color: #EDD9A3;
    overflow: hidden;
    user-select: none;
}

.main {
    margin-top: 20vh;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(10, 50px);
}

.greeting {
    display: grid;
    grid-row: 1;
    grid-column: 1 / 3;
}

.util {
    display: grid;
    grid-column: 4 / 5;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(1, 5vh);
    align-items: center;
}

#date {
    display: grid;
    grid-column: 2 / 4;
    grid-row: 2;

}

#clock {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    justify-content: left;
}

.weather {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 4vh);
    grid-row: 1;
    grid-column: 3 / 4;
}

#icon {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    margin-right: 0px;
}

#temp {
    display: grid;
    grid-column: 3;
    grid-row: 1;
    margin-bottom: 0;
}

#sunset {
    font-size: 15px;
    display: grid;
    grid-column: 3;
    grid-row: 2;
    margin-bottom: 0;
    grid-row-gap: 1vh;
}

#progress {
    display: grid;
    grid-column: 3 / 4;
    grid-row: 3;
    display: none;
    width: 10vw;

}

meter {
    display: none;
}

meter {
    -webkit-appearance: none;
}

meter::-webkit-meter-bar {
    background: #EDD9A3;
    border: 0.5px solid #EDD9A3;
    border-radius: 2px;
}

meter::-webkit-meter-optimum-value {
    background: #443742;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1d4e6', endColorstr='#6bb4d1', GradientType=0);
}

.searchForm {
    display: grid;
    grid-row: 4;
    grid-column: 1 / 5;
}

.search {
    background-color: transparent;
    border-style: none;
    border-bottom-style: solid;
    border-width: 2px;
    border-color: #CEA07E;
    color: white;
    width: 100%;
    caret-color: #CEA07E;
}

.search:focus {
    outline: none;
}

.searchOptions {
    display: grid;
    grid-row: 4;
    grid-column: 5;
    font-family: Nunito;

}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 20px;
    font-family: Nunito;
    background-color: transparent;
    color: #CEA07E;
    border-style: none;
}

option {
    background-color: #443742;
}

option:active {
    border-style: none;
}

/* Links Section */

.links {
    display: grid;
    grid-row: 5 / 6;
    grid-column: 1 / 2;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 75px);
    align-items: center;
    justify-items: center;
}

.links svg {
    stroke: #EDD9A3;
}

.links a {
    width: 32px;
}

.calendar {
    display: grid;
    grid-row: 1;
    grid-column: 2;
}

.github {
    display: grid;
    grid-row: 1;
    grid-column: 2;
}

.gmail {
    display: grid;
    grid-row: 1;
    grid-column: 3;
}

.youtube {
    display: grid;
    grid-row: 2;
    grid-column: 1;
}

.amazon {
    display: grid;
    grid-row: 2;
    grid-column: 2;
}

.messenger {
    display: grid;
    grid-row: 2;
    grid-column: 3;
}

/* News Section */
#news {
    display: grid;
    grid-row: 5;
    grid-column: 2 / 6;
    padding: 10px;
}


#news h2 {
    color: #EDD9A3;
}


#news li {
    list-style-type: none;

}

#news a {
    color: #CEA07E;
    text-decoration: none;
    width: 100%;
    margin-bottom: 10px;
}

.convertCase {
    color: white;
    display: grid;
    grid-row: 8;
    grid-column: 1;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 10);
    grid-gap: 5px;
    margin-right: 20px;

}

.convertCase input {
    display: none;
    grid-row: 1;
    grid-column: 1;
    caret-color: #CEA07E;
    color: black;
    height: 50px;
}

.convertCase input:focus {
    height: 50px;
}

#convert {
    background-color: transparent;
    text-align: center;
    color: #EDD9A3;
    display: none;
    grid-column: 2;
    grid-row: 1;
    text-decoration: none;
    margin-left: 5px;
    width: 50;
}

#hide {
    background-color: transparent;
    text-align: center;
    color: #EDD9A3;
    display: grid;
    grid-column: 1;
    grid-row: 1;
    text-decoration: none;
    width: 50%;
}

.convertCase a:focus {
    border-style: none;
}

.control {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 10px);
}

.form-control {
    background-color: #443742;
    color: white;
    height: 100px;
    border-style: solid;
    border-color: #EDD9A3;
}


.form-control:focus {
    background-color: #443742;
    height: 100px;
    border-style: solid;
    border-color: #EDD9A3;
}

.bus-times {
    display: grid;
    grid-column: 1;
    grid-row: 2;
}

.articles {
    display: grid;
    grid-column: 1;
    grid-row: 6 / 6;
}

.btc-price {
    display: grid;
    grid-column: 1;
    grid-row: 10;
}