/* The following CSS applies on all screen sizes */

/* Colours and fonts */
:root
{
    /* Fonts */
    --bodyfont: Hack;
    --headerfont: Hack;

    /* Main colours */
    --background:#441750; /* Page background */
    --color:#dcdfe4;
    --block:rgba(12, 14, 15, 0.5); /* Background colour for the grid blocks in the content */

    /* Link colours */
    --link:#d900ff;
    --linkhover:#ff00ff;

    /* Header colours */
    --h1:#dcdfe4;
    --h2:#dcdfe4;
    --h3:#dcdfe4;
    --h4:#dcdfe4;

    /* Sidebar colours */
    --sidebar:rgba(12, 14, 15, 0.5);
    --sidebarcolor:#dcdfe4;
    --title: #dcdfe4;
    --sidebarlink: #d900ff;
    --sidebarlinkhover:#ff00ff;

    /* Menu colours */
    --menubg:rgba(44, 26, 48, 0.5);
    --menucolor:#d900ff;
    --menubghover:#ff00ff;
    --menucolorhover:rgba(12, 14, 15, 0.5);
}

* { margin:0; padding:0; }

/* Main body styling */
html, body
{
    /* Page background */
    background: #39194d url('images/universal/background.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-attachment:fixed;

    /* Page text */
    font:1rem Hack;
    color:var(--color);
}

/* Rounded corners */
main section, #sidebar-content, #main-footer
{
    border-radius:5px;
}

/* Sidebar styling */
#sidebar-content
{
    text-align:center;
    background: var(--sidebar);
    color: var(--sidebarcolor);
    padding:10px;
}

#sidebar-content header
{
    color:var(--title);
    font:1.8em var(--headerfont);
    margin:8px;
}

#sidebar-content p a
{
    color:var(--sidebarlink);
    transition:0.5s ease;
}

#sidebar-content p a:hover
{
    color:var(--sidebarlinkhover);
    transition:0.5s ease;
}

/* The Modal (background) */
.modal
{
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content
{
  margin: auto;
  display: block;
  max-width: 100%;
  max-height: 80%;
}

/* Caption of Modal Image */
.caption
{
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #dcdfe4;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption
{
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom
{
  from {-webkit-transform:scale(0)}
  to {-webkit-transform:scale(1)}
}

@keyframes zoom
{
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close
{
  position: absolute;
  top: 15px;
  right: 35px;
  color: #dcdfe4;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus
{
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.container
{
  position: relative;
  width: 100%;
}

.overlay
{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  opacity: 1;
}

.icon img
{
    border-radius:100%; /* Makes the icon a circle */
    max-width:150px; /* Icon size */
}

.copyButton
{
    width:67px; /* this controls the width of the box */
    font-size:10px; /* this controls the font size */
}

/* Photo style */
.photo img
{
    border-radius:5px; /* Rounds image corners */
}

/* Menu style */

#main-menu
{
    font:1.1em var(--headerfont);
    width:100%;
}

#main-menu ul
{
    list-style:none;
}

#main-menu li a
{
    padding:7px;
    background:var(--menubg);
    color:var(--menucolor);
    text-decoration:none;
    transition:0.5s ease;
}

#main-menu li a:hover, #main-menu li a:focus
{
    background: var(--menubghover);
    color:var(--menucolorhover);
    transition:0.5s ease;
}

/* Content style */

main
{
    margin-top:10px;
}

/* Block style */

main section, #main-footer
{
    padding:15px;
    background:var(--block);
    margin-bottom:10px;
}

main h1
{
    font:1.8em var(--headerfont);
    color:var(--h1);
}

main h2
{
    font:1.5em var(--headerfont);
    color:var(--h2);
}

main h3
{
    font:1.3em var(--headerfont);
    color:var(--h3);
}

main h4
{
    font:1em var(--headerfont);
    font-style:italic;
    color:var(--h4);
}

p
{
    line-height:1.5;
    margin:10px 0 10px 0;
}

main a
{
    color:var(--link);
    transition:0.5s ease;
}

main a:hover, main a:focus
{
    color:var(--linkhover);
    transition:0.5s ease;
}

main ul
{
    list-style-position: outside;
    margin-left: 25px;
}

main ul li
{
    line-height:1.5;
}

main img
{
    max-width:100%;
}

main input, textarea, select, button
{
    background: var(--block);
    color: var(--color);
    font: 1rem var(--bodyfont);
    border: 1px solid;
    padding: 8px;
    margin: 2px;
}

main svg, iframe
{
    border-radius:5px; /* Rounds image corners */
}

main svg
{
    width="100%" height="auto"
}

/* Table style */
main table
{
    border-collapse: separate;
    border: 1px solid #dcdfe4;
    border-radius:5px;
    width: 100%;
}

main td
{
    text-align: center;
}

main tr:hover
{
    background-color: #7f00ff;
}

#main-footer
{
    text-align:center;
}

/* The following CSS only applies to mobile/small screens */

/* Container style */
#container
{
    width: calc(100% - 20px);
    padding:10px;
    margin-top:10px;
}

#sidebar-content
{
    width: calc(100% - 20px);
}

#main-menu li
{
    margin-bottom:15px;
    display:inline-block;
}

/* Skip to content button */
#skip a
{
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background:var(--block);
    color:var(--link);
    z-index:1000;
    padding:5px;
}

#skip a:focus
{
    top: 0;
    transition:top 0.5s ease;
}

/* The following CSS only applies to desktop/big screens */

@media screen and (min-width: 800px)
{
    #container
    {
        max-width:950px;
        width:90%;
        margin:25px auto;
        display:flex;
        gap:20px;
    }

    #sidebar
    {
        flex: 1 1 calc(25% - 20px);
        margin-top:10px;
    }

    /* Sticky sidebar */
    #sidebar-content
    {
        position:sticky;
        top:10px;
    }

    /* Make menu links into a column */
    #main-menu li
    {
        display:block;
        margin:0;
    }

    #main-menu li a
    {
        display:block;
        border-bottom:1px solid;
    }

    main
    {
        flex: 1 1 calc(75% - 30px);
        display:flex;
        flex-wrap:wrap;
        gap:10px;
    }

    main section
    {
        margin:0;
    }

    #main-footer
    {
        flex: 1 1 calc(100% - 40px);
    }

    /* Defining grid blocks */
    .full { flex: 1 1 calc(100% - 40px);}
    .half { flex: 1 1 calc(50% - 40px); }
    .third { flex: 1 1 calc(33% - 40px); }
    .twothird { flex: 1 1 calc(66% - 40px); }
    .quarter { flex: 1 1 calc(25% - 40px); }
    .threequarter { flex: 1 1 calc(75% - 40px); }
}