/*Text alignments  */

h1 {
  text-align: center;
  font-family: 'abyss', sans-serif;
}

img {text-align: center}
  
li {text-align: center; color: yellow}

/* Animation */
@keyframes moveUpDown {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.upDown {
  margin-left: auto;
  margin-right: auto;
  animation: moveUpDown 2s infinite;
  animation-delay: 1s;
}


/* Background  */

.bluebg {
  background: linear-gradient(to bottom, #ADD8E6, #03ecf0);

  margin: 0;
        }



/* basic formatting */
.img{
  display: flex;

gap: 5000px;
}

.row {
  display: flex;
}


/* Resizing (esp. images) */

.resizebaby {
    width:10%; /* you can use % */
    height: auto;
}



.resizehalf {
    width: 30%; /* you can use % */
    height: auto;
}


.resizedouble {
    width: 100%; /* you can use % */
    height: auto;
}



.resizebig {
    width: 110%; /* you can use % */
    height: auto;  
    margin-left: auto;
  margin-right: auto;
}


/* Centering */  

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* Flex boxes */

.flex{
  display: flex;
  flex-flow: row wrap;
}

.flexcenter{
  display: flex;
  flex-flow: row wrap;
 justify-content: center;

}

.flexrow{
  display: flex;
  flex-flow: row wrap;
  width: 30%;
}

.flexrowcenter{
  display: flex;
  flex-flow: row wrap;
   justify-content: center;
  width: 30%;
}


.flexcol{
  display: flex;
  flex-flow: column wrap;
}

/* Boxes */

.sidebar {
  width: 350px;
  height: 700px;
  margin: 10px;
  padding: 25px;
  background: black;
  border: 5px solid green;
}


.resizebadkids {
    width: 100px; 
    height: auto;
    
  margin-left: auto;
  margin-right: auto;
}

.badkidsbio {
  width: 800px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 25px;
  background: black;
  border: 5px solid #00C1FF;
}





/* Important text */


a:h1{
color: #ff1d1d;
}

a:p{
color: white;
}

a:link {
  color: #FFDC00;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: #FFDC00;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: lemonchiffon;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}



.a {
  text-decoration: none;
  font-size: 22px;
  color: black;
}

button:hover, a:hover {
  opacity: 0.7;
}


/* Fonts */


@font-face {
  font-family: 'basiic';
  src: url(/fontin/basiic-webfont.woff);
}

@font-face {
  font-family: 'roth';
  src: url(/fontin/RothmanPlain.ttf);
}

@font-face {
  font-family: 'lexo';
  src: url(/fontin/lexo-webfont.woff);
}


@font-face {
  font-family: 'blotter';
  src: url(/fontin/blotter/blotter-regular_1-webfont.woff);
}

@font-face {
  font-family: 'abyss';
  src: url(/fontin/abyss.otf);
}



@font-face {
  font-family: 'bagnard';
  src: url(fontin/Bagnard.otf);
}


@font-face {
  font-family: 'barber';
  src: url(fontin/barber.woff);
}

.barber {
font-family: 'barber';
}

.bagnard {
font-family: 'bagnard';
}


.abyss {
font-family: 'abyss';
}

.roth {
  font-family: 'roth';
}

.rowdy {
font-family: 'rowdy';
}



.brizel {
font-family: 'brizel';
}


.dumb3 {
font-family: '3dumb';
}

.dumb2 {
font-family: '2dumb';
}


.font1942 {
font-family: '1942';
}

.prefix {
font-family: 'prefix';
}
.amatic {
font-family: 'amatic';
}


.constant {
font-family: 'constant';
}

.actionj {
font-family: 'actionj';
}

.basiic {
font-family: 'basiic';
}

.lexo {
font-family: 'lexo';
}

.blotter {
font-family: 'blotter';
}



body {
  font-family: Arial;
  padding: 20px;
  background: #f1f1f1;
}