/* Variables */
:root{
	--textColor: Black;
	--bgColor: White;
    --logoColor: rgb(209, 215, 0);
    --logoTriadicBlue: rgb(0, 80, 215);
    --logoTriadicRed: rgb(215, 0, 80);
    --logoTriadicBlueOpac: rgba(0, 80, 215, 0.7);
    --logoTriadicRedOpac: rgba(215, 0, 80, 0.7);
    --logoColorOpac: rgba(209, 215, 0, 0.7);
}

@font-face {
    font-family: 'prototype';
    src: url('../fonts/Prototype.ttf') format('truetype');
}

.topnav{
    display: flex;
    top: 0; 
    left: 0;
    position: fixed;
    width: 100%;
    background-color: var(--logoColorOpac);
    flex-direction: column;
    font-size: 20px;
    z-index: 1;
}

.nav-item{
    margin: 10px;
    font-family: prototype;
	color: var(--textColor);
    display: flex;
}

.nav-item > a {
    width: 100%;
}

.nav-item, .active > a{
    color: var(--logoTriadicRedOpac);
}

.nav-item + img{
    display: flex;
}

.nav-item.left{
    width: 100%;
}

label {
    cursor: pointer;
    display: flex;
    /* width: 100%; */
    justify-content: flex-end;
  }
  #menu-toggle {
    display: none; /* hide the checkbox */
  }
  #menu {
    display: none;
    background-color: none;
  }
  #menu-toggle:checked + #menu {
    display: block;
    transition: 0.5s;
  }

  #menu-toggle:checked + .left{
      display: none;
  }



  a{
	color: var(--logoTriadicBlue);
}

a:hover{
	background-color: var(--logoColor);
}


.content{
    /* font-family: prototype; */
    font-family: Consolas,monaco,monospace;
    background-color: var(--bgColor);
    max-width: 800px;
    margin: auto;
    margin-top: 60px;
}

.center{
    text-align: center;
    margin-top: 30%;
}

@media screen and (min-width: 768px) {

    .topnav{
        font-size: 22px;
    }

    label{
        display: none;
    }

    #menu{
        display: flex;
    }

	.center{
        text-align: center;
        margin-top: 20%;
    }
}