body {
  margin:auto;
  background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
  background-attachment: fixed;
  box-sizing: border-box;
  font-family: Courier New;
  background: rgba(151, 191, 217, 0.2);
}

header {
  text-align: center;
  color: #3f51b5;
  padding: 5px;
}

main {
  width: 700px;
  margin: auto;
  font-size: 16px;
  color: #575757;
}

.navi {
  display: flex;
  justify-content: space-evenly;
  padding: 50px 0px;
}

article {
  padding: 0px 30px 30px 30px;
  background-color: #ffffff;
  box-shadow: 10px 10px 15px #3f51b5;
  border: 1px solid #3f51b5;
  margin-bottom: 60px;
}

article img {
  width: 49%;
  display: inline;
}

h1 {
  font-family: UnifrakturMaguntia;
  font-size: 60px;
  font-style: normal;
  font-variant: normal;
  font-weight: 200;
}

h2 {
  display: flex;
  font-size: 24px;
  line-height: 28px;
  padding: 30px;
  margin: 0 auto auto -30px;
  width: 103%;
}

 h2 img {
  width: 90px;
  height: 30px;
  margin-right: 15px;
}

h3.date {
  color: DarkTurquoise;
  font-size: 16px;
  text-align: right;
}

h4 {
  margin:30px 0 0;
}

h4 {
  margin:30px 0 15px;
}

.box {
  width: 800px;
  margin: 0 auto;
}
ul {
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

li {
    list-style: none;
    width: 30%;
    margin: 10px;
  }

li img {
  width: 100%;
}

footer {
  background-color:AliceBlue;
  background-image: url("https://www.transparenttextures.com/patterns/lined-paper-2.png");
  color: #808080;
  text-align: center;
  padding: 5px;
  background: #14b8ff;
  background: linear-gradient(0deg, rgb(63 81 181) 0%, rgb(63 81 181 / 0%) 25%);
}

footer a:hover {
  color: SkyBlue;
}

footer img {
  transform: scale(-1, 1);
}



.broider {
  border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAWpJREFUWEfVmEESgzAMA5v/P5pOD+nBjGYlh1LSGxjIYsuK6XiV33Ecx+fUGGPU2J3HleME81jQCUbZcjNcX5SO57qKY647tgF136hepzJMmaHKyfu3BZ2ZSptqVUJUiW/Xu6JXpbsN1NVO1abKPFUkjdumngKlILTxIKhb0rkQ+S1pUVV2P9Buqa6+Tz1Pdj1pJt0AVptQlp4yRS5B8fT5+4G63ZhmQkmonie3OGmUHvB30HQ4IQ1SPN2y5YRPmSUQirdBXY0SQDdO68ca7YLQfTYoGfxqE6XjYXUB20cfC/orF6BxUTVxe3oig6ZSq72/DeoOH9QsFCdpYUYfC0oacsc1ekHKYI3b/z2lL/Bz0Kumnau/tVCjtGNQd1MTzTi5yPKnSLfEpNGTTdFCq/GuthHUHe9cDVJJVSJk16davB00BVx1BZKC3EK3AU2nJPqESLvZltC2oG6XukaeXqcqYht+umD3egX6BlDKUDlppo2wAAAAAElFTkSuQmCC') 14 /  14px / 0 round;
  border-width:  14px;
  border-style:  solid;
}

.amethyst {
  border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAACFUlEQVR4Xu2dQXKDMBAEzZdyzpfymnwpZ38pucZylaem1Agot69aZqXekQCB7e0WPj/f998U87/98+tja+LH2Kvni4O/+gBTcenxCRSegQLdG+g4Bdo1sT2+jU9rburv3vmeHLp3wlkgs8fvPT6BllclqSACpYEm4umyI7Wny5K05iX9tASM7Xvn2wTaluwxfuQn0DmeN4GWa2bivRxo6tDV2wUKV1CgAoUJwHI6VKAwAVhOhwoUJgDLPTk03QvT977weJbLpVt1fLdp+QgXJxQoDFygRwN1TX29PZfOKfVTzyQIG+JwuTTFxw4KNJRMoLCnBSpQmAAsp0MFChOA5aYd2grA/T+9XOLjvXxZQoGWwFK4QBOhsj0CTQFlvrcL9xEIXHKBChQmAMvpUIHCBGA5HSpQmAAsp0MFChOA5XSoQGECsJzvNk0CTXsf7oeWgAVaAkvhAk2EyvYa6KifBMr+XC68Hb+v4oQSCxSeAwIVKEwAltOhAoUJwHI69GxA24rA/T+9XOLjvXxZQoGWwFK4QBOhsj0CTQFlvrcL9xEIXHKBChQmAMvpUIHCBGA5HSpQmAAst9yhY8JxPPTXxY/O589dTjpWh1795y6PnoKrlxh8+67dG2jjR0Dt8W18m0+g5RKQCiJQgT5OwuSYdsqmk37KV7+KkxLOXlemkxh9kqHzCXTvf6tJU0SHvv5HMx0KO/QPQbphkvUQJtsAAAAASUVORK5CYII=') 28 /  28px / 0 round;
  border-width:  28px;
  border-style:  solid;
  margin-top: 30px;
  }

.notebook {
  border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAB+0lEQVR4AeyaUU7DMBQEDdfh/kfhPPDNWJXVZAAnHaR+rGyv/cbbR6T0fTz59/E1vl75s8L1NNCV4auPB1ROQEB3A/r5Nt6u/FnxZG38/8H1JZRETuqAngTI5QElkZN6AsoeQc39VuOcv5tmj6RmfavxCehuBV/tPAGVbyygNtBVj2DPGGP8OALH6fdj8guIEipfckADKhOQ7d5XPfDZnkg/+bzb2/WVl68ooAGVCch2U0LZA6nl/W9nNwG9XYV/XFBAZeABvShQ+dj72pVQ+W4CGlCZgGxXQgMqE5DtSmhAZQKyXQkNqExAtiuhAZUJyHZTQvkOiZr7r8Y5/wl9yakT0EtWsdGhAypfRkBtoOyBfIdEzf05Tj/Ov7suofINBzSgMgHZrt822UBlv5e3q4fKEQjobwPlcyW1vL9t9+9+JVS+goAGVCYg25XQgMoEZLsSGlCZgGxXQgMqE5DtSmhAZQKyXQkdQ0UaUBXnGAENqExAtpsSyvfq1Nx/Nc75d9cT0LsX/Nv1BVQmHFAbKHsg3yFRc3+O04/z765LqHzDAQ2oTEC267dNx4A+XNVX/iGaYwMBPcbt4aqAPkRzbGACyudK6mPb7LuKz83UrH81PgHdt/RrnCyg8j0FdDeg7ClX0yuerIc9letLKImc1AE9CZDLA0oiJ/U3AAAA//+LC0O1AAAABklEQVQDAHrrawcPOjMYAAAAAElFTkSuQmCC") 28 /  28px / 0 round;
  border-width:  28px;
  border-style:  solid;
  padding-left: 20px;
  }

.cinema {
  border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAB+0lEQVR4AezZi46CMBCFYXbf/513i0kTajstczxigr/RIMyl8DEhJv5uvKwCgFo5tw1QQM0C5nZMKKBmAXM7JhRQs4C5HRMKqFnA3I4JBdQsYG6nTKj5FO7VDlDz/QQUULOAuR0TCqhZwNyOCQXULGBud2ZC/8qafLatGhSO+H0GNK4m0gkA2pG8dgDQ1/y66hFofVbUbVckHLhTSXWp2+baRqBNAjs5AUBzXstsQJdEuYQdtD4L6jbXIZ/9U0qu/JTl3vqubo/tDvrW1b6tOaDmOw4ooGYBczsmFFCzgLkdE3oB6Ku/EV2neFUf6/UyoebbBiigZgFzOyYUULOAuR0TCqhZwNyOCQXULGBux4QCahYwtxtN6OO/kbKOui2lH3srC6vXWeuaNUegTQI7OQFAc17LbECXRLkEQHNey2xAl0S5BEBzXstsQJdEuYQd9Pk/lVyHfHb9/XbVNn+GuYrGbwfNlZM9FQB0ypMPApo3m1aMQJtnwrT6HsHsVUx9RqDZBcg/CAB6wHB8BdSheOhxBvT5mfHt+we+/usZ0L6KI6EAoCGNFgBUcwurAA1ptACgmltYBWhIowUA1dzCKkBDmmkgDAIa0mgBQDW3sArQkEYLAKq5hVWAhjRaAFDNLawCNKTRAoBqbmEVoCGNFgBUcwurAA1ptMA/AAAA//92UG2ZAAAABklEQVQDANsikKmitVYuAAAAAElFTkSuQmCC") 28 /  28px / 0 round;
  border-width:  28px;
  border-style:  solid;
  padding: 0 20px;
  }

.cinema iframe  {
  margin: auto;
  display: block;
}

.windows {
  border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAdlJREFUeF7t3dFOg0AYBWH6/g+t0XjRUsJ0wt+U4Hh7Dlv4dgtbjXpbluVr6WtM4BbomOXvQIHOegY67LkJ+rNqr/S1fkZMX9/D+Ftv+ekX/PTkBDo8A4EGOiwwPByt0NG8e+jzB5v1M0SBBxqoviGoFfb3Yef+RdTxrdDn+SHA9RHtQ2GNB/pOoI1bQCt0JUCfBFuhB1coAaq8h1LbprZNWmD4APWWbR/K+gTKI+w32oceFVwdH2igxwRO95bv5/ZiQl/ZhwYaqBAYrrZCTwBK31wYPsWPD0cPNb1togE/fsVvPgG6/kDlBAQqwageKAnJPFAJRvVASUjmgUowqgdKQjIPVIJRPVASknmgEozqgZKQzAOVYFQPlIRkHqgEo3qgJCTzQCUY1QMlIZkHKsGoHigJyTxQCUb1QElI5oFKMKoHSkIyD1SCUT1QEpJ5oBKM6oGSkMwDlWBUD5SEZB6oBKN6oCQk80AlGNUDJSGZByrBqB4oCck8UAlG9UBJSOaBSjCqB0pCMg9UglE9UBKSeaASjOpvB6UTuHq+++cw+21kP/2BerPdIwI9G+jw+VxuuIeH1iv30MsJDF9QoIEOCwwPhyt0+PX+13D9+5/h+Q400GGB4eG+AevyJBCQhO7MAAAAAElFTkSuQmCC') 28 /  28px / 0 round;
  border-width:  28px;
  border-style:  solid;
  margin-top: 40px;
  padding: 0 10px;
}


.thinking {
border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAACMUlEQVR4Xu3dXU7DMBBF4XYrILH/9SDBVoBnV+Loam6CGw6vM/77PHGTgsL95k9V4F7tzc5ugpaLQNBnB/38eP9qruHl9W2rojh9MoI2y+mnL0EFjQTqlzxVYPvMO3s80hWUhMK4oCEYpQtKQmF8DLqeYe0zMlzPQ/rZZ6yg5QcDQQXNDgEv+cxrnN0Gv/wlT+KCklAYFzQEo/Q/B939vpMA03i63vgMTQdIF7BbfrpeQWEHBS2XuKCClgXK3VmhgpYFyt3VKzTtsLye7bojD7xtog62W/HBEyIPQcMNEDQEo3RBSSiMCxqCUbqgJBTGBQ3BKD0GpQY04NXj5PNw20QNrg5G6yMfQUlwiQsaglG6oCQUxgUNwShdUBIK44KGYJQuKAmFcUFDMEoXlITCuKAhGKULSkIQJ8C1uY+egg5LLmxuhYZglC4oCYVxQUMwSheUhMK4oCEYpY9B1wHSDmmCu8en6/VPcZYdFrRc8oJeHXS6w2WfuLvp/Otn6HRCsUC5wXT+gu7+oTTd4XLBxd1N548VSvela3x958h0grFI2KA9P0GXlxtOX0IjqKDhNV3+Rp5GxwqlM2YapwkeHaf5p+MLevYlTzs4jacV0M6n+afjWaFHVyjtWDtO97FphUzvm6fjxb+XF/R3ckGPfvdduwLpUfTylzydQdNHMzqj1g2lfIofPd91/PGnPC0ojQuaioWPgtPurdAn/9cWeMlPK+S/tRe0vOOCCloWKHf3DeESwHNa0P0pAAAAAElFTkSuQmCC') 28 /  28px / 0 round;
border-width:  28px;
border-style:  solid;
}