style.css

/*remove the white border around the screen*/
body    {
    margin: 0%;
}

/*Title Container*/
.container {
    text-align: center;
    padding-top: 100px;
}

/*Title Text*/
.title  {
    font-size: 800%;
    font-weight: bold;
    text-align: center;
    padding: 2px;
    display: inline;
}

/*Actual Content*/
.content   {
    padding: 100px;
    padding-top: 0;
    font-size: 300%;
    text-align: center;
}

/*Contains both title and actual content*/
.main {
    position:absolute;
    color: #323232;
    background-color:#faebd7;
    transition: 200ms all ease;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 
    height: 200%;
}

/*Sidebar's Box*/
.sidebar {
    text-align: center;
    height: 100%;
    width: 70%;
    position: fixed;
    top: 0;
    background-color: MediumSeaGreen;
    padding-top: 250px;
    right: -70%;
    transition: 200ms all ease;
}

/*Sidebar Links*/
.sidebar a {
    display: flex;
    justify-content:space-evenly;
    color: white;
    font-size: 350%;
    padding: 40px;
    text-decoration: none;
    transition: 200ms all;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

/*Hidden checkbox for sidebar-toggle*/
#sidebar-toggle {
    display: none;
}

/*The fancy button button for opening sidebar*/
.sidebar-toggle-button::before {
    text-align: center;
    content: "☰";
    font-size: 100%;
    position: fixed;
    top: 2%;
    width: 100px;
    height: 100px;
    background-color: white;
    border-radius: 50%;
    left: 88%;
    z-index: 9999;
    font-size: 72px;
}

/*Executing Anmiation for opening the sidebar*/
#sidebar-toggle:checked ~ .sidebar-toggle-button::before {
    animation-name: to-x;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
}

/*Executing Anmiation for closing the sidebar*/
#sidebar-toggle:not(checked) ~ .sidebar-toggle-button::before {
    animation-name: to-ham;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
}

/*the sidebar button animations*/
@keyframes to-ham {
    to  {
        transform:rotateZ(1turn);
        content: "☰";
    }
}
@keyframes to-x {
    to  {
        transform:rotateZ(-1turn);
        content: "✕";
    }
}

/*Shadow on main content when sidebar is open*/
#sidebar-toggle:checked ~ .sidebar {
    right: 0px;
    box-shadow: 0px 0px 200px 500px hsla(0, 0%, 0%, 0.732);
}

/*Hover effect for links in the sidebar*/
.sidebar > a:hover {
    color: #323232;
}

/*hidden checkbox for theme-toggle*/
#theme-toggle   {
    display: none;
}

/*fancy button for theme toggle*/
.theme-toggle-button::before {
    content: "☀️";
    font-size: 81.5px;
    text-align: center;
    position: fixed;
    top: 2%;
    left: 2%;
    width: 100px;
    height: 100px;
    background-color: white;
    border-radius: 50%;
    z-index: 9999;
}
/*Animation for theme-toggle button*/
@keyframes to-moon {
    from    {}
    to  {
        transform:rotateZ(1turn);
        content: "🌑";
    }
}
@keyframes to-sun {
    from    {}
    to  {
        transform:rotateZ(-1turn);
        content: "☀️";
    }
}

/*executing theme-toggle animation*/
#theme-toggle:checked ~ .theme-toggle-button::before {
    animation-name: to-moon;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
}
#theme-toggle:not(checked) ~ .theme-toggle-button::before {
    animation-name: to-sun;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
}

/*actual theme change on the main content*/
#theme-toggle:checked ~ .main {
    background: #051428;
    color: #faebd7;
}

/*actual theme change on the sidebar*/
#theme-toggle:checked ~ .sidebar {
    background-color: #102f1e;
}

/*adjusting easter-egg's size*/
.easter-egg-button > img  {
    margin-top: 75%;
}


/*optimizations for the desktop*/
@media (min-width: 1280px)   {
    /*adjust the theme-toggle size*/
    .theme-toggle-button::before {
        content: "☀️";
        font-size: 225%;
        position: absolute;
        top: 2%;
        left: 2%;
        width: 50px;
        height: 50px;
        background-color: white;
        border-radius: 50%;
        z-index: 9999;
    }

    /*disable sidebar's shadow*/
    #sidebar-toggle:checked ~ .sidebar {
        right: 0px;
        box-shadow: 0px 0px 0px 0px hsla(0, 0%, 0%, 0);
    }

    /*make font smaller and always keep the sidebar open*/
    .sidebar {
        text-align: center;
        height: 100%;
        width: 12%;
        position: fixed;
        top: 0;
        background-color: MediumSeaGreen;
        padding-top: 25px;
        right: 0%;
        transition: 200ms all ease;
    }

    /*make the sidebar links font smaller*/
    .sidebar a {
        display: flex;
        justify-content: space-evenly;
        font-size: 150%;
        color: white;
        padding: 35px;
        text-decoration: none;
        transition: 200ms all;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        white-space: nowrap;
    }

    /*disable the mobile sidebar toggle*/
    .sidebar-toggle-button  {
        display: none;
    }

    /*adjust easteregg size for desktop*/
    .easter-egg-button > img  {
        max-width: 75%;
        margin-top: 225%;
    }

    /*move the main content to make space for the always open sidebar*/
    .main   {
        padding-top: 0;
        right: 12%;
    }

    /*make title smaller*/
    .title  {
        font-size: 500%;
        font-weight: bold;
        text-align: center;
        padding: 2px;
        display: inline;
    }

    /*reduce font size because large text is not needed on the desktop*/
    .content   {
        font-size: 200%;
    }
}