@font-face {
    font-family: 'bebas';
    src: url('fonts/BebasNeue-Regular.woff2') format('woff2'),
         url('fonts/BebasNeue-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'thryn';
    src: url('./fonts/thryn.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'malik';
    src: url('./fonts/MalikTrial-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'intimacy';
    src: url('./fonts/intimacy.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'neoteric';
    src: url('./fonts/NEOTERIC╕ - Regular DEMO VERSION.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'typolatin';
    src: url('./fonts/TypoLatinserif-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'enge';
    src: url('./fonts/engebrechtre bd.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;}

body{
background-image: url("./images/Magic8ball.jpg");

background-color: black;
}

p{
background-color: rgba(0, 0, 0, 0.25);
/*margin-left: 320px;*/
color: silver;
margin-top:10px;
margin-left:10px;
width: 700px;
font-family: Neoteric;
font-size: 30px;
text-align: center;
}





h1{
    margin-top:316px;
    margin-left: 775px;
    font-size:20px;
    font-family:Typolatin;
    color:black;
    text-align:center;
}


a:link {
  color: silver;
  font-family: bebas;
  font-size: 40px;
}

/* visited link */
a:visited {
  color: gray;
  font-family: bebas;
  font-size: 40px;
}

/* mouse over link */
a:hover {
  color: hotpink;
  font-family: bebas;
  font-size: 40px;
}

/* selected link */
a:active {
  color: lavender;
  font-family: bebas;
  font-size: 40px;
}

.linklist{
  background-color: rgba(40, 40, 40, 0.8);
  font-family: bebas;
  font-size: 45px; 
  text-align: right;
  padding-left:6px;
  padding-right:6px;
}



input[type=submit]{
  margin-left:291px;
}

input[type=text]{
  height: 10;
  width: 500;
  margin-left:250px;
  margin-top:0px;
}


input[type=checkbox]{
  height: 0;
  width: 0;
  visibility: hidden;
}

label {
  cursor: pointer;
  text-indent: -9999px;
  width: 100px;
  height: 50px;
  background: grey;
  display: block;
  border-radius: 100px;
  position: relative;
}

label:after {
  content: '';
  position: absolute;
  top: 4px;
  left: 5px;
  width: 42px;
  height: 42px;
  background: #fff;
  border-radius: 90px;
  transition: 0.3s;
}

input:checked + label {
  background: #bada55;
}

input:checked + label:after {
  left: calc(100% - 5px);
  transform: translateX(-100%);
}

label:active:after {
  width: 130px;
}



img {
  max-width: 100%;
  max-height:100%;
  padding-left:30px;
}

.container {
    align-items: center;
    justify-content: space-between;
    display: flex;
    width:73.5%;
  }
  
.container2 {
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    font-family:typolatin;
    display: flex;
    background-color: rgba(40, 40, 40, 0.8);
    text-align: center;
    width: 73.5%;
    font-size:20px;
    color: silver;

  }
    /*background-color: rgba(67, 215, 241, 0.8);*/
.sidebar{

    position:absolute;
    top:0;
    right:0;
    width: 22%;
    height:100%;
    font-size:22px;
    padding-left:5px;
    padding-right:12px;
    
    color: gray;
    font-family: bebas;
    text-align: justify;
    background: -webkit-linear-gradient(left, rgba(67, 215, 241, 0.8), rgba(67, 215, 241, 0.8) 80%, rgba(40, 40, 40, 0.8) 10%, rgba(40, 40, 40, 0.8));
    overflow: auto;
}

.sidebar a:link {
    color: gray;
    font-size:22px;
    font-family: bebas;
    text-align: justify;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar a:visited {
    font-size:22px;
    color: teal;
    font-family: bebas;
    text-align: justify;/* update this to your desired size */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}




a.shorten{
    display: inline-block;
    width: 300px; /* update this to your desired size */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;


}

}
.sidebar a:active,
.sidebar a:hover {
    color: teal;
    font-size:22px;
    font-family: bebas;

    text-align: justify;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar h3 {
    font-size: 28px;
    font-weight: bold;
    font-family: bebas;
    color: gray;
    padding-left:102px;
    margin-top:12px;
    text-decoration:underline;
}


.back:link {
  color: silver;
  font-family: bebas;
  font-size: 25px;
}

/* visited link */
.back:visited {
  color: gray;
  font-family: bebas;
  font-size: 25px;
}

/* mouse over link */
.back:hover {
  color: hotpink;
  font-family: bebas;
  font-size: 25px;
}

/* selected link */
.back:active {
  color: lavender;
  font-family: bebas;
  font-size: 25px;
}
/* centering
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}*/