@font-face {font-family:'Questrial';font-style:normal;font-weight:400;src:url('/webfonts/questrial/questrial-v18-latin-regular.woff2') format('woff2'),url('/webfonts/questrial/questrial-v18-latin-regular.woff') format('woff'),url('/webfonts/questrial/questrial-v18-latin-regular.ttf') format('truetype');font-display:swap}

body,html { margin: 0; padding: 0; }
body { background-color: #ddd; font-family:'Questrial',Arial,Helvetica,sans-serif; font-weight:400; color:#A71109; }
body h1 { margin: 0; padding: 12px; font-size:2rem; text-align: center; background-color: #bf0000; color: white; }
h2 { color: #333; margin-bottom: 0.3em; }
.topicinfo { color: #333; margin-bottom: 15px; }

.tutoset { padding: 15px;  }
.videolist { display: flex; gap: 15px; flex-direction: column; }

.videobox { }
.videobox a { display: flex; gap: 15px; padding: 15px; width: 800px; background-color: #fff; text-decoration: none; border: 5px solid #bbb; border-radius: 9px; }
.videobox a:hover { border-color: #bf0000; }
.videobox a .id { font-weight: bold; color: #333; font-size: 22px; flex: 0 0 60px; }
.videobox a .middle { }
.videobox a .title { font-weight: bold; color: #bf0000; font-size: 22px; }
.videobox a .description { font-weight: normal; color: #333; line-height: 1.5em; }
.videobox a .duration { margin-left: auto; font-weight: normal; color: #666; text-align: right; font-size: 25px; white-space: nowrap; }
.videobox a .play img { display: block; width: 32px; height: 32px; }