* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

#wholeNav {
    /* border: 1px solid grey; */
    height: 250px;
    /* width: 100%; */
    background-color: #0398dc;
}

#upperContent {
    /* border: 1px solid red; */
    width: 100%;
    height: 250px;
    margin-left: 35px;
}

#matchesList {
    /* border: 1px solid pink; */
    height: 42px;
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
}

#matchesList>p {
    color: white;
    font-size: medium;
    font-family: BentonSans-Medium, Arial, sans-serif;
}

#matchesData {
    /* border: 3px solid pink; */
    height: 210px;

}
#actualBody {
    /* border: 1px solid green; */
    display: grid;
    grid-template-columns: repeat(4, 24%);
    gap: 10px;
}

#actualBody>.scoreCard {
    border: 1px solid darkblue;
    height: 185px;
    /* width: 25%; */
    border-radius: 20px;
    background-color: white;
}

.scoreContent {
    line-height: 1rem;
}

.lineOne {
    /* border: 1px dotted red; */
    margin: 5px 0px 0px 5px;

}

.LHS {

    display: flex;
    gap: 10px;
}

.nationFlag {
    width: 25px;
    height: 25px;

}

.topLine {
    /* border: 1px solid khaki; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 10px;

}

.bottomLine {
    /* border: 1px solid khaki; */
    display: flex;
    justify-content: space-between;
    margin: 0px 10px;
}

.lineThree {

    margin: 15px 10px;
}

.lineFour {
    /* border: 1px solid teal; */
    display: flex;
    margin: 5px;
    padding: 5px;
    font-size: medium;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    gap: 40px;
}

/* Bottom nav css */
#bottomNav {
    /* border: 1px solid gray; */
    height: 55px;
    background-color: #03a9f4;
    /* position: absolute; */
    z-index: 20;
    width: 100%;
}
.fixed{
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 20;
}

#navContent {

    width: 96%;
    margin: auto;
    height: 100%;
}

#navBody {
    /* border: 1px dotted yellow; */
    height: 100%;
    display: flex;
    flex-direction: row;
}

#LHSlogo {
    display: flex;
    align-items: center;
    position: relative;
}

#LHSlogo>a>img {
    margin: 0px 40px 0px 0px;
    width: 162px
}

#RHSfeatures {
    /* border: 1px solid red; */
    width: 100%;
    display: flex;
    justify-content: space-between
}

#optn1 {
    /* border: 1px solid pink; */
    width: 650px;

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;

}

.optnList>a {
    color: white;
    font-size: 18px;
    text-decoration: none;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    font-family: Arial, Helvetica, sans-serif;
}

#optn2 {
    /* border: 1px solid green; */
    width: 550px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
}

#optn2>a {
    display: flex;
    height: 3rem;
    cursor: pointer;
    align-items: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    text-decoration: none;
}

.anchDiv {
    color: white;
    font-size: 18px;
    cursor: pointer;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    margin-left: 10px;
    font-family: Arial, Helvetica, sans-serif;
}

.test>.test2 {
    display: flex;
}

.iconFrame {
    cursor: pointer;
}
#checkScroll{
    /* border: 3px solid gray; */
    height: 1000px;
}

/* /////////////////try////////////////// */
/*
:root {
--canvas-color: #ffffff;
--hover-color: #e7e7e8;
}
.darkmode {
--canvas-color: #15202B;
--hover-color: #22303C;
}
body {
background-color: var(--canvas-color);
}
#dark-mode-toggle {
display: none;
}
.dark-mode-toggle {
display: inline-block;
cursor: pointer;
padding: .5rem;
}
.dark-mode-toggle:hover, .dark-mode-toggle:focus {
background-color: var(--hover-color);
border-radius: 16px;
}
.dark-mode-toggle::after {
content: '🌚';
width: 30px;
height: 30px;
display: grid;
place-content: center;
line-height: 0;
transition: background-color 1s,
transform 1s ease-in;
}
#dark-mode-toggle:checked+.dark-mode-toggle::after {
content: '🌞';
transform: translateX(0px) rotate(360deg);
}
*/
/* //////////////////////////////////////////////// */